<template>
  <div class="fault-analysis">
    <el-card class="input-card">
      <el-input
        v-model="phenomenon"
        placeholder="请输入故障现象"
        type="textarea"
        :rows="4"
      ></el-input>
      <el-button
        type="primary"
        @click="handlePredict"
        :loading="loading"
        style="margin-top: 20px"
        >诊断故障</el-button
      >
    </el-card>

    <el-card class="result-card" v-if="result">
      
      <div slot="header" class="clearfix">
        <span>诊断结果</span>
      </div>
      <el-divider content-position="left">故障类别</el-divider>
      <div class="result-item">{{ result.category }}</div>

      <el-divider content-position="left">可能原因</el-divider>
      <ul class="result-list" v-if="result.reasons.length">
        <li v-for="(reason, index) in result.reasons" :key="'reason' + index">
          {{ reason }}
        </li>
      </ul>
      <!-- <div v-else>未找到可能原因</div> -->

      <el-divider content-position="left">解决措施</el-divider>
      <ul class="result-list" v-if="result.solutions.length">
        <li
          v-for="(solution, index) in result.solutions"
          :key="'solution' + index"
        >
          {{ solution }}
        </li>
      </ul>
      <!-- <div v-else>未找到解决措施</div> -->
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      phenomenon: "",
      loading: false,
      result: {
        category: "",
        reasons: [],
        solutions: [],
      },
    };
  },
  methods: {
    async handlePredict() {
      console.log("000000000000")
      if (!this.phenomenon.trim()) {
        this.$message.error("请输入故障现象");
        return;
      }
      console.log("111111111")
      this.loading = true;
      try {
        const token = getToken(); // 获取认证令牌
        const res = await axios.get("/wareHouses/LSTM", {
          params: { faultPhenomenon: this.phenomenon },
          headers: {
            Authorization: `Bearer ${token}`, // 将令牌添加到请求头中
          },
        });
        
console.log("22222222")
        // if (res.data.error) {
        //   throw new Error(res.data.error);
        // }

        this.result = res.data;
      } catch (err) {
        this.$message.error("诊断失败: " + err.message);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.fault-analysis {
  max-width: 800px;
  margin: 20px auto;
}

.input-card {
  margin-bottom: 30px;
}

.result-card {
  margin-top: 20px;
}

.result-item {
  font-size: 16px;
  color: #409eff;
  margin: 10px 0;
}

.result-list {
  padding-left: 20px;
}
.result-list li {
  margin: 8px 0;
  line-height: 1.6;
}
</style>
